<template>
  <a-drawer
    title="房源状态颜色配置"
    :visible="visible"
    :destroyOnClose="true"
    :maskClosable="true"
    :width="$store.getters.isMobile ? 320 : 500"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeModal"
  >
    <a-row :wrap="true" :gutter="[12, 12]">
      <a-col
        :span="$store.getters.isMobile ? 12 : 8"
        v-for="(item, index) of statusList"
        :key="'list_' + index"
      >
        <a-card class="box">
          <!-- <div
            class="status-color"
            :style="{ backgroundColor: item.color }"
          ></div> -->
          <color-picker
            v-model:hex="item.color"
            :show-opacity="false"
            :btn-style="{
              width: '40px',
              height: '40px',
              margin: '0 auto',
            }"
          />
          <div class="title">{{ item.title }}</div>
          <div
            class="del"
            @click="handleStatusDel(index)"
            v-if="item.isCustom == 1"
          >
            <CloseCircleFilled />
          </div>
        </a-card>
      </a-col>
      <a-col
        :span="$store.getters.isMobile ? 12 : 8"
        key="add_new_status"
        @click="addVisible = true"
      >
        <a-card class="box add">
          <PlusOutlined style="font-size: 36px" />
          <div class="title">新建</div>
        </a-card>
      </a-col>
    </a-row>
    <div class="drawer-footer">
      <a-space>
        <a-button @click.prevent="closeModal">取消</a-button>
        <a-button type="primary" @click.prevent="onSubmit">保存</a-button>
      </a-space>
    </div>
    <a-modal
      v-model:visible="addVisible"
      title="添加自定义状态"
      @ok="handleAddOk"
      @cancel="handleAddCancel"
      centered
    >
      <a-row :gutter="12">
        <a-col :span="$store.getters.isMobile ? undefined : 5" class="lh-32"
          >限制条件:</a-col
        >
        <a-col :span="$store.getters.isMobile ? undefined : 8">
          <a-radio-group v-model:value="addForm.type">
            <a-radio-button value="vacant">空置</a-radio-button>
            <a-radio-button value="expire">距到期</a-radio-button>
          </a-radio-group>
        </a-col>
        <a-col :span="$store.getters.isMobile ? 6 : 8">
          <a-input-number
            class="w-100p"
            v-model:value="addForm.limit"
            :min="1"
            placeholder="请输入限制范围" 
          />
        </a-col>
        <a-col :span="$store.getters.isMobile ? undefined : 2" class="lh-32"
          >日</a-col
        >
      </a-row>
      <a-row :gutter="12" class="mt-20">
        <a-col :span="$store.getters.isMobile ? undefined : 5" class="lh-32">
          状态颜色：
        </a-col>
        <a-col :span="$store.getters.isMobile ? 8 : 6">
          <color-picker
            v-model:hex="addForm.color"
            :show-opacity="false"
            :btn-style="{
              width: '100px',
              height: '32px',
            }"
          />
        </a-col>
        <a-col :span="$store.getters.isMobile ? 8 : 4" class="lh-32">{{
          addForm.color
        }}</a-col>
      </a-row>
    </a-modal>
  </a-drawer>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRaw,
  toRefs,
  watch,
} from "@vue/runtime-core";
import { PlusOutlined, CloseCircleFilled } from "@ant-design/icons-vue";
import ColorPicker from "colorpicker-v3";
import { message } from "ant-design-vue";
// require("colorpicker-v3/dist/style.css");

const DEFAULT_COLOR = "#a9dcfd";

export default defineComponent({
  name: "HousingStatusManagement",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {
    PlusOutlined,
    ColorPicker,
    CloseCircleFilled,
  },
  setup(props, { emit }) {
    const state = reactive({
      statusList: [],
      addVisible: false,
      defaultColor: DEFAULT_COLOR,
    });

    const addForm = reactive({
      type: "vacant",
      limit: "",
      color: DEFAULT_COLOR,
    });

    const handleAddOk = () => {
      if (addForm.limit) {
        const index = props.list.findIndex(
          (item) => item.type == addForm.type && item.limit == addForm.limit
        );
        if (index > -1) {
          message.warning("您已经添加过此房源状态！");
          return;
        }
        let newItem = { ...addForm, isCustom: 1 };
        if (newItem.type == "vacant") {
          newItem.title = `空置${newItem.limit}日以上`;
        } else {
          newItem.title = `${newItem.limit}日内到期`;
        }
        state.statusList.push(newItem);
        handleAddCancel();
      } else {
        message.warning("您还未填写限制条件天数！");
      }
    };
    const handleAddCancel = () => {
      addForm.type = "vacant";
      addForm.limit = "";
      addForm.color = DEFAULT_COLOR;
      state.addVisible = false;
    };

    const handleStatusDel = (index) => {
      state.statusList.splice(index, 1);
    };

    const closeModal = () => {
      emit("cancel");
    };

    const onSubmit = () => {
      emit("success", { list: state.statusList });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val && props.list) {
          console.log("props.list", props.list);
          state.statusList = JSON.parse(JSON.stringify(props.list));
        }
      }
    );

    return {
      ...toRefs(state),
      addForm,
      closeModal,
      onSubmit,
      handleAddOk,
      handleAddCancel,
      handleStatusDel,
    };
  },
});
</script>
<style lang="less" scoped>
.box {
  text-align: center;
  position: relative;
  .status-color {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto;
  }
  .title {
    font-size: 14px;
    margin-top: 10px;
    color: #000;
  }
  .del {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: red;
    cursor: pointer;
  }
}
.add {
  cursor: pointer;
  color: #666;
  .title {
    color: #666 !important;
  }
}
.lh-32 {
  line-height: 32px;
}
</style>
